<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('检验任务')" />
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>检验任务页面</title>
		<!-- 引入 Element UI 样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			.main-container {
				display: flex;
				padding: 10px;
				gap: 10px;
				width: 100%;
				box-sizing: border-box;
			}

			.left-panel {
				width: 350px; /* 左侧宽度350px */
				padding: 10px;
				border: 1px solid #e6e6e6;
				border-radius: 4px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				max-height: calc(100vh - 40px);
				overflow-y: auto;
				box-sizing: border-box;
			}

			.right-panel {
				flex: 1; /* 自动填充剩余空间 */
				padding: 10px;
				border: 1px solid #e6e6e6;
				border-radius: 4px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				box-sizing: border-box;
				min-width: 0; /* 确保内容不会溢出容器 */
			}

			.select-data {
				color: #409EFF;
				cursor: pointer;
				margin-left: 5px;
				text-decoration: underline;
				font-size: 13px;
			}

			.select-data:hover {
				color: #66b1ff;
			}

			.data-info {
				margin: 5px 0 10px 0;
				padding-left: 8px;
				border-left: 2px solid #e6e6e6;
				font-size: 12px;
			}

			.data-info p {
				margin: 3px 0;
				line-height: 1.4;
			}

			h3, h4 {
				margin: 8px 0;
				color: #333;
				font-size: 15px;
			}

			.form-item {
				margin-bottom: 10px;
			}

			/* 紧凑的表单样式 */
			.demo-form-inline {
				margin-bottom: 10px;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			.demo-form-inline .el-form-item {
				margin-right: 8px;
				margin-bottom: 8px;
			}

			.demo-form-inline .el-form-item__label {
				font-size: 12px;
				padding-right: 5px;
			}

			.el-select {
				width: 140px;
			}

			/* 修复日期时间选择器过窄的问题 */
			.el-date-editor {
				width: 180px !important; /* 增加整个日期编辑器的宽度 */
			}

			/* 确保弹出面板有足够宽度 */
			.el-date-picker {
				width: auto !important; /* 让面板根据内容自动调整宽度 */
				min-width: 300px !important; /* 设置最小宽度 */
			}

			/* 调整时间选择部分的宽度 */
			.el-time-spinner {
				width: 140px !important;
			}

			.el-button {
				padding: 8px 15px;
				font-size: 12px;
			}

			/* 表格样式优化 - 确保表格撑满容器 */
			.el-table {
				font-size: 12px;
				width: 100% !important;
			}

			.el-table th {
				padding: 8px 0;
			}

			.el-table td {
				padding: 8px 0;
			}

			/* 表格容器确保不溢出 */
			.table-container {
				width: 100%;
				overflow-x: auto;
			}

			/* 分页样式 */
			.el-pagination {
				font-size: 12px;
				margin-top: 10px;
				text-align: right;
			}

			.el-pagination button, .el-pagination span:not([class*=suffix]) {
				padding: 5px 10px;
			}

			/* 任务时间选择器的特殊样式 */
			.task-time-range {
				display: flex;
				align-items: center;
				gap: 5px;
			}
			.el-table__header{
				width: 100%!important;
			}
			.el-table__body{
				width: 100%!important;
			}
		</style>
	</head>

	<body>
	<div id="app">
		<div class="main-container">
			<div class="left-panel">
				<h3>新建检验任务</h3>
				<div class="form-item">
					<label style="font-size: 13px;">检验类型：</label>
					<el-select v-model="inspectionType" placeholder="请选择检验类型" style="width: 230px;">
						<el-option label="海面风" value="海面风"></el-option>
						<el-option label="海浪" value="海浪"></el-option>
						<el-option label="水温" value="水温"></el-option>
					</el-select>
				</div>

				<div>
					<h4>预报产品与检验参数</h4>
					<span class="select-data" @click="openParamDialog">选择参数与参数配置</span>
					<div class="data-info">
						<p>文件名：西北太平洋大气数值预报产品</p>
						<p>来源：国家海洋环境预报中心</p>
						<p>空间分辨率：0.25×0.25</p>
						<p>起报时间：2025/3/20 00时</p>
						<p>预报时效：2025/3/21 00时——2025/3/27 12时</p>
						<p>时间间隔：29个时间点（10分钟1次）</p>
						<p>检验要素：海平面气压、6小时面风速、风向</p>
						<p>检验分区：中国近海（渤海、黄海、东海、南海）</p>
						<p>检验时效：24、48、72、96、120、144、168小时</p>
						<p>检验指标：评分检验、MAE平均绝对误差、RAE相对绝对误差、RMSE均方根、误差、CC相关系数、预报准确率、预报评分</p>
					</div>
				</div>

				<div>
					<h4>海洋站点观测数据</h4>
					<span class="select-data" @click="openOceanStationDialog">选择数据</span>
					<div class="data-info">
						<p>数量：169</p>
						<p>观测要素：风向、风速</p>
						<p>观测频次：1小时</p>
						<p>观测时段：2025/3/21 00时——2025/3/27 12时</p>
					</div>
				</div>

				<div>
					<h4>浮标观测数据</h4>
					<span class="select-data" @click="openBuoyDialog">选择数据</span>
					<div class="data-info">
						<p>数量：41</p>
						<p>观测要素：风向、风速</p>
						<p>观测频次：1小时</p>
						<p>观测时段：2025/3/21 00时——2025/3/27 12时</p>
					</div>
				</div>

				<el-button type="primary" style="margin-top: 10px;" @click="executeInspection">执行检验</el-button>
			</div>

			<div class="right-panel">
				<h3>任务列表</h3>
				<el-form :inline="true" :model="queryForm" class="demo-form-inline">
					<el-form-item label="任务状态">
						<el-select v-model="queryForm.taskStatus" placeholder="全部">
							<el-option label="全部" value="全部"></el-option>
							<el-option label="已完成" value="已完成"></el-option>
							<el-option label="执行中" value="执行中"></el-option>
							<el-option label="待处理" value="待处理"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="检验要素">
						<el-select v-model="queryForm.inspectionElement" placeholder="请选择">
							<el-option label="海面风" value="海面风"></el-option>
							<el-option label="海浪" value="海浪"></el-option>
							<el-option label="水温" value="水温"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="预报产品">
						<el-select v-model="queryForm.forecastProduct" placeholder="请选择">
							<el-option label="西北太平洋大气数值预报产品" value="西北太平洋大气数值预报产品"></el-option>
							<el-option label="中国近海海浪数值预报产品" value="中国近海海浪数值预报产品"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="任务时间">
						<div class="task-time-range">
							<el-date-picker v-model="queryForm.startTime" type="datetime" placeholder="开始时间"></el-date-picker>
							<span>-</span>
							<el-date-picker v-model="queryForm.endTime" type="datetime" placeholder="结束时间"></el-date-picker>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="queryTask">查询</el-button>
					</el-form-item>
				</el-form>

				<div class="table-container">
					<el-table :data="taskList" border style="width: 100%; margin-top: 5px;">
						<el-table-column prop="index" label="序号" width="40"></el-table-column>
						<el-table-column prop="taskId" label="任务ID" width="100"></el-table-column>
						<el-table-column prop="startTime" label="启动时间" width="110"></el-table-column>
						<el-table-column prop="endTime" label="结束时间" width="110"></el-table-column>
						<el-table-column prop="inspectionElement" label="检验要素" width="80"></el-table-column>
						<el-table-column prop="forecastProductType" label="预报产品类型" width="140"></el-table-column>
						<el-table-column prop="forecastProductFileName" label="预报产品文件名" width="160"></el-table-column>
						<el-table-column prop="forecastDataProcessing" label="预报数据处理" width="70">
							<template slot-scope="scope">
								<i class="el-icon-success" v-if="scope.row.forecastDataProcessing" style="color: #67c23a;"></i>
								<i class="el-icon-error" v-else style="color: #f56c6c;"></i>
							</template>
						</el-table-column>
						<el-table-column prop="observationDataProcessing" label="观测数据处理" width="70">
							<template slot-scope="scope">
								<i class="el-icon-success" v-if="scope.row.observationDataProcessing" style="color: #67c23a;"></i>
								<i class="el-icon-error" v-else style="color: #f56c6c;"></i>
							</template>
						</el-table-column>
						<el-table-column prop="timeSpaceMatching" label="时空匹配" width="60">
							<template slot-scope="scope">
								<i class="el-icon-success" v-if="scope.row.timeSpaceMatching" style="color: #67c23a;"></i>
								<i class="el-icon-error" v-else style="color: #f56c6c;"></i>
							</template>
						</el-table-column>
						<el-table-column prop="indexCalculation" label="指标计算" width="60">
							<template slot-scope="scope">
								<i class="el-icon-success" v-if="scope.row.indexCalculation" style="color: #67c23a;"></i>
								<i class="el-icon-error" v-else style="color: #f56c6c;"></i>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="状态" width="60"></el-table-column>
						<el-table-column label="操作" width="100">
							<template slot-scope="scope">
								<el-button type="text" size="mini" @click="viewTask(scope.row)">查看</el-button>
								<el-button type="text" size="mini" v-if="scope.row.status === '待处理'" @click="deleteTask(scope.row)" style="color: #f56c6c;">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>

				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
							   :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
							   :total="total" style="margin-top: 10px;">
				</el-pagination>
			</div>
		</div>

		<!-- 选择参数与参数配置弹窗 -->
		<el-dialog title="选择参数与参数配置" :visible.sync="paramDialogVisible" width="60%">
			<el-upload action="#" :before-upload="beforeUpload" style="margin-bottom: 15px;">
				<el-button size="small" type="primary">点击上传文件</el-button>
				<div slot="tip" class="el-upload__tip">
					只能上传Excel文件，且不超过5MB
				</div>
			</el-upload>
			<el-table :data="paramTableData" border style="width: 100%; font-size: 13px;">
				<el-table-column prop="paramName" label="参数名称"></el-table-column>
				<el-table-column prop="paramValue" label="参数值"></el-table-column>
				<el-table-column prop="paramDesc" label="参数描述"></el-table-column>
				<el-table-column label="操作" width="80">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="editParam(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click="paramDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveParams">确定</el-button>
			</div>
		</el-dialog>

		<!-- 海洋站点观测数据选择弹窗 -->
		<el-dialog title="海洋站点观测数据" :visible.sync="oceanStationDialogVisible" width="60%">
			<el-upload action="#" :before-upload="beforeUpload" style="margin-bottom: 15px;">
				<el-button size="small" type="primary">点击上传文件</el-button>
				<div slot="tip" class="el-upload__tip">
					只能上传Excel文件，且不超过5MB
				</div>
			</el-upload>
			<el-table :data="oceanStationTableData" border style="width: 100%; font-size: 13px;">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="stationName" label="站点名称"></el-table-column>
				<el-table-column prop="windDirection" label="风向"></el-table-column>
				<el-table-column prop="windSpeed" label="风速"></el-table-column>
				<el-table-column prop="observationTime" label="观测时间"></el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click="oceanStationDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirmOceanStation">确定</el-button>
			</div>
		</el-dialog>

		<!-- 浮标观测数据选择弹窗 -->
		<el-dialog title="浮标观测数据" :visible.sync="buoyDialogVisible" width="60%">
			<el-upload action="#" :before-upload="beforeUpload" style="margin-bottom: 15px;">
				<el-button size="small" type="primary">点击上传文件</el-button>
				<div slot="tip" class="el-upload__tip">
					只能上传Excel文件，且不超过5MB
				</div>
			</el-upload>
			<el-table :data="buoyTableData" border style="width: 100%; font-size: 13px;">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="buoyName" label="浮标名称"></el-table-column>
				<el-table-column prop="windDirection" label="风向"></el-table-column>
				<el-table-column prop="windSpeed" label="风速"></el-table-column>
				<el-table-column prop="observationTime" label="观测时间"></el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click="buoyDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirmBuoy">确定</el-button>
			</div>
		</el-dialog>
	</div>

	<!-- 引入 Vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<!-- 引入 Element UI 组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					inspectionType: '海面风',
					queryForm: {
						taskStatus: '全部',
						inspectionElement: '',
						forecastProduct: '',
						startTime: '',
						endTime: ''
					},
					taskList: [
						{
							index: 1,
							taskId: 'HMF20250910001',
							startTime: '2025/3/21 00时',
							endTime: '2025/3/21 02时',
							inspectionElement: '海面风',
							forecastProductType: '西北太平洋大气数值预报产品',
							forecastProductFileName: 'NMF_BEN_SA_NWPACDT_YYYYMMDDHH_16B_ATM',
							forecastDataProcessing: true,
							observationDataProcessing: true,
							timeSpaceMatching: true,
							indexCalculation: true,
							status: '已完成'
						},
						{
							index: 2,
							taskId: 'HL20250910001',
							startTime: '2025/3/21 00时',
							endTime: '2025/3/21 03时',
							inspectionElement: '海浪',
							forecastProductType: '中国近海海浪数值预报产品',
							forecastProductFileName: 'NMF_BEN_SA_NWPACDT_YYYYMMDDHH_16B_WAVE',
							forecastDataProcessing: true,
							observationDataProcessing: true,
							timeSpaceMatching: true,
							indexCalculation: true,
							status: '已完成'
						},
						{
							index: 3,
							taskId: 'HMF20250910002',
							startTime: '2025/3/21 08时',
							endTime: '',
							inspectionElement: '海面风',
							forecastProductType: '西北太平洋大气数值预报产品',
							forecastProductFileName: 'NMF_BEN_SA_NWPACDT_YYYYMMDDHH_16B_ATM',
							forecastDataProcessing: true,
							observationDataProcessing: true,
							timeSpaceMatching: true,
							indexCalculation: false,
							status: '执行中'
						},
						{
							index: 4,
							taskId: 'HS20250910001',
							startTime: '',
							endTime: '',
							inspectionElement: '水温',
							forecastProductType: '全球海洋温度预报产品',
							forecastProductFileName: 'NMF_BEN_SA_GLOBALT_YYYYMMDDHH_16B_TEMP',
							forecastDataProcessing: false,
							observationDataProcessing: false,
							timeSpaceMatching: false,
							indexCalculation: false,
							status: '待处理'
						}
					],
					currentPage: 1,
					pageSize: 10,
					total: 4,
					paramDialogVisible: false,
					paramTableData: [
						{
							paramName: '空间分辨率',
							paramValue: '0.25×0.25',
							paramDesc: '预报产品的空间分辨率'
						},
						{
							paramName: '起报时间',
							paramValue: '2025/3/20 00时',
							paramDesc: '预报的起报时间'
						},
						{
							paramName: '预报时效',
							paramValue: '2025/3/21 00时——2025/3/27 12时',
							paramDesc: '预报覆盖的时间段'
						},
						{
							paramName: '时间间隔',
							paramValue: '10分钟',
							paramDesc: '预报数据的时间间隔'
						}
					],
					oceanStationDialogVisible: false,
					oceanStationTableData: [
						{
							stationName: '站点1',
							windDirection: '东风',
							windSpeed: '5m/s',
							observationTime: '2025/3/21 00时'
						},
						{
							stationName: '站点2',
							windDirection: '南风',
							windSpeed: '3m/s',
							observationTime: '2025/3/21 01时'
						},
						{
							stationName: '站点3',
							windDirection: '西风',
							windSpeed: '4m/s',
							observationTime: '2025/3/21 02时'
						}
					],
					buoyDialogVisible: false,
					buoyTableData: [
						{
							buoyName: '浮标1',
							windDirection: '西风',
							windSpeed: '4m/s',
							observationTime: '2025/3/21 00时'
						},
						{
							buoyName: '浮标2',
							windDirection: '北风',
							windSpeed: '6m/s',
							observationTime: '2025/3/21 01时'
						},
						{
							buoyName: '浮标3',
							windDirection: '东风',
							windSpeed: '2m/s',
							observationTime: '2025/3/21 02时'
						}
					]
				};
			},
			created() {
				// 初始化时加载第一页数据
				this.fetchData();
			},
			methods: {
				openParamDialog() {
					this.paramDialogVisible = true;
				},
				openOceanStationDialog() {
					this.oceanStationDialogVisible = true;
				},
				openBuoyDialog() {
					this.buoyDialogVisible = true;
				},
				queryTask() {
					this.$message.success('查询条件已提交: ' + JSON.stringify(this.queryForm));
				},
				viewTask(row) {
					this.$message.info('查看任务: ' + row.taskId);
				},
				deleteTask(row) {
					this.$confirm('确定要删除任务 ' + row.taskId + ' 吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						const index = this.taskList.findIndex(item => item.taskId === row.taskId);
						if (index !== -1) {
							this.taskList.splice(index, 1);
							this.total = this.taskList.length;
							this.$message.success('任务已删除');
						}
					}).catch(() => {
						this.$message.info('已取消删除');
					});
				},
				handleSizeChange(val) {
					this.pageSize = val;
					this.$message.info('每页 ' + val + ' 条');
					this.fetchData()
				},
				handleCurrentChange(val) {
					this.currentPage = val;
					this.$message.info('当前页: ' + val);
					this.fetchData()
				},
				// 调用后台接口获取数据
				fetchData() {
					// 构造请求参数
					const params = {
						pageNum: this.currentPage,  // 页码
						pageSize: this.pageSize     // 每页条数
						// 可以添加其他查询参数
					};
					// 调用后台接口（这里使用axios示例）
					axios.post('/system/touchstone/list', params)
							.then(response => {
								// 请求成功处理
								console.log(`POST请求成功，返回数据:\n${JSON.stringify(response.data, null, 2)}`);
							})
							.catch(error => {
								// 请求失败处理
								console.log(`POST请求失败: ${error.message}`, true);
							});
				/*	axios.post('/system/touchstone/list', { params })
							.then(response => {
								const res = response.data;
								if (res.success) {
									this.tableData = res.data.list;  // 数据列表
									this.total = res.data.total;     // 总条数
								}
							})
							.catch(error => {
								console.error('获取数据失败:', error);
							});*/
				},
				beforeUpload(file) {
					const isExcel = file.type === 'application/vnd.ms-excel' ||
							file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
					if (!isExcel) {
						this.$message.error('只能上传Excel文件');
						return false;
					}
					const isLt5M = file.size / 1024 / 1024 < 5;
					if (!isLt5M) {
						this.$message.error('文件大小不能超过5MB');
						return false;
					}
					return true;
				},
				editParam(row) {
					this.$message.info('编辑参数: ' + row.paramName);
					// 这里可以添加编辑参数的逻辑
				},
				saveParams() {
					this.$message.success('参数已保存');
					this.paramDialogVisible = false;
				},
				confirmOceanStation() {
					this.$message.success('海洋站点数据已选择');
					this.oceanStationDialogVisible = false;
				},
				confirmBuoy() {
					this.$message.success('浮标数据已选择');
					this.buoyDialogVisible = false;
				},
				executeInspection() {
					this.$message.success('检验任务已开始执行');
				}
			}
		});
	</script>
	</body>

	</html>
